<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
    <div class="flex">
      <!-- 左侧：建立连接、发送消息 -->
      <el-card :gutter="12" class="w-1/2" shadow="always">
        <template #header>
          <div class="card-header">
            <span>连接</span>
          </div>
        </template>
        <div class="flex items-center">
          <span class="mr-4 text-lg font-medium"> 连接状态: </span>
          <el-tag :color="getTagColor">{{ status }}</el-tag>
        </div>
        <hr class="my-4" />
        <div class="flex">
          <el-input v-model="server" disabled>
            <template #prepend>服务地址</template>
          </el-input>
          <el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
            {{ getIsOpen ? '关闭连接' : '开启连接' }}
          </el-button>
        </div>
        <p class="mt-4 text-lg font-medium">消息输入框</p>
        <hr class="my-4" />
        <el-input
          v-model="sendText"
          :autosize="{ minRows: 2, maxRows: 4 }"
          :disabled="!getIsOpen"
          clearable
          type="textarea"
          placeholder="请输入你要发送的消息"
        />
        <el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
          <el-option key="" label="所有人" value="" />
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.nickname"
            :value="user.id"
          />
        </el-select>
        <el-button
          :disabled="!getIsOpen"
          block
          class="ml-2 mt-4"
          type="primary"
          @click="handlerSend"
        >
          发送
        </el-button>
      </el-card>
      <!-- 右侧：消息记录 -->
      <el-card :gutter="12" class="w-1/2" shadow="always">
        <template #header>
          <div class="card-header">
            <span>消息记录</span>
          </div>
        </template>
        <div class="max-h-80 overflow-auto">
          <ul>
            <li v-for="msg in messageList.reverse()" :key="msg.time" class="mt-2">
              <div class="flex items-center">
                <span class="text-primary mr-2 font-medium">收到消息:</span>
                <span>{{ formatDate(msg.time) }}</span>
              </div>
              <div>
                {{ msg.text }}
              </div>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </Dialog>
</template>
<script lang="ts" name="InfraWebSocket" setup>
import { formatDate } from '@/utils/formatTime'
import { useWebSocket } from '@vueuse/core'
import { getAccessToken } from '@/utils/auth'
import * as UserApi from '@/api/system/user/user'
import { useCache, CACHE_KEY } from '@/hooks/web/useCache'
const { wsCache } = useCache()

const dialogVisible = ref(false)
const dialogTitle = ref('')

const message = useMessage() // 消息弹窗

const server = ref(wsCache.get(CACHE_KEY.SERVER_WS_URL) + '?token=' + getAccessToken()) // WebSocket 服务地址
const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色

/** 发起 WebSocket 连接 */
const { status, data, send, close, open } = useWebSocket(server.value, {
  autoReconnect: false,
  heartbeat: false
})

/** 监听接收到的数据 */
const messageList = ref([] as { time: number; text: string }[]) // 消息列表
watchEffect(() => {
  if (!data.value) {
    return
  }
  try {
    // 1. 收到心跳
    if (data.value === 'pong') {
      // state.recordList.push({
      //   text: '【心跳】',
      //   time: new Date().getTime()
      // })
      return
    }

    // 2.1 解析 type 消息类型
    const jsonMessage = JSON.parse(data.value)
    const type = jsonMessage.type
    const content = JSON.parse(jsonMessage.content)
    if (!type) {
      message.error('未知的消息类型：' + data.value)
      return
    }
    if (!['demo-message-receive', 'notice-push'].includes(type)) return
    // 2.2 消息类型：demo-message-receive
    if (type === 'demo-message-receive') {
      const single = content.single
      if (single) {
        messageList.value.push({
          text: `【单发】用户编号(${content.fromUserId})：${content.text}`,
          time: new Date().getTime()
        })
      } else {
        messageList.value.push({
          text: `【群发】用户编号(${content.fromUserId})：${content.text}`,
          time: new Date().getTime()
        })
      }
      return
    }
    // 2.3 消息类型：notice-push
    if (type === 'notice-push') {
      messageList.value.push({
        text: `【系统通知】：${content.title}`,
        time: new Date().getTime()
      })
      return
    }
    message.error('未处理消息：' + data.value)
  } catch (error) {
    message.error('处理消息发生异常：' + data.value)
    console.error(error)
  }
})

/** 发送消息 */
const sendText = ref('') // 发送内容
const sendUserId = ref('') // 发送人
const handlerSend = () => {
  // 1.1 先 JSON 化 message 消息内容
  const messageContent = JSON.stringify({
    text: sendText.value,
    toUserId: sendUserId.value
  })
  // 1.2 再 JSON 化整个消息
  const jsonMessage = JSON.stringify({
    type: 'demo-message-send',
    content: messageContent
  })
  // 2. 最后发送消息
  send(jsonMessage)
  sendText.value = ''
}

/** 切换 websocket 连接状态 */
const toggleConnectStatus = () => {
  if (getIsOpen.value) {
    close()
  } else {
    open()
  }
}

/** 初始化 **/
const userList = ref<any[]>([]) // 用户列表
onMounted(async () => {
  // 获取用户列表
  userList.value = await UserApi.listAllSimple()
  server.value = wsCache.get(CACHE_KEY.SERVER_WS_URL) + '?token=' + getAccessToken()
})

const openView = async () => {
  messageList.value = []
  dialogVisible.value = true
}
defineExpose({ openView }) // 提供 open 方法，用于打开弹窗
</script>
